<template>
	<menuheader ref='menuheader' icon='back' :iconsize='18'>个人档案</menuheader>
	<view class="container">
		<uni-forms ref="personForm" :modelValue="personData" label-position="top" :rules="validatorRules">
			<uni-section title="基础信息" type="line">
				<view class="section-content">
					<uni-forms-item label="人员类型" required name="usertype">
						<uni-data-checkbox v-model="personData.usertype" :localdata="dictUserType"/>
					</uni-forms-item>
					<uni-forms-item label="昵称" required name="nickname">
						<uni-easyinput v-model="personData.nickname" placeholder="请输入昵称" type="text" maxlength="64"/>
					</uni-forms-item>
					<uni-forms-item label="身高" required name="height">
						<uni-easyinput v-model="personData.height" placeholder="请输入身高" type="number"/>
					</uni-forms-item>
					<uni-forms-item label="体重" required name="weight">
						<uni-easyinput v-model="personData.weight" placeholder="请输入体重" type="number"/>
					</uni-forms-item>
					<uni-forms-item label="生日" name="birthday">
						<uni-datetime-picker type="date" return-type="date" v-model="personData.birthday"/>
					</uni-forms-item>
					<uni-forms-item label="性别" name="sex">
						<uni-data-checkbox v-model="personData.sex" :localdata="dictSex"/>
					</uni-forms-item>
				</view>
			</uni-section>
			<uni-section title="身体状况" type="line">
				<view class="section-content">
					<uni-forms-item label="活动强度" name="intensity">
						<uni-data-checkbox v-model="personData.intensity" :localdata="dictIntensity" />
					</uni-forms-item>
					<uni-forms-item label="孕期" required v-if='personData.sex=="女"' name="pregnancy">
						<uni-data-checkbox v-model="personData.pregnancy" :localdata="dictPregnancy" />
					</uni-forms-item>
					<uni-forms-item label="哺乳期" required v-if='personData.sex=="女"' name="feeding">
						<uni-data-checkbox v-model="personData.feeding" :localdata="dictFeeding" />
					</uni-forms-item>
				</view>
			</uni-section>
			<uni-section title="饮食偏好" type="line">
				<view class="section-content">
					<uni-forms-item label="饮食目标" name="hobby">
						<uni-data-checkbox v-model="personData.hobby" :localdata="dictHobby"/>
					</uni-forms-item>
					<uni-forms-item label="忌口事项" name="taboo">
						<uni-data-checkbox v-model="personData.taboo" multiple :localdata="dictTaboo" />
					</uni-forms-item>
				</view>
			</uni-section>
		</uni-forms>
	</view>
	<view style='height: 50px; clear:both'></view>
	<view class='btn-bar'>
		<button class='btn-save bgcor-b' @click="submit('personForm')">保存</button>
	</view>
</template>

<script>
	import gui from '@/lib/gui.js';
	import dateutil from '@/lib/dateutil.js';
	
	export default {
		data() {
			return {
				personData: {
					nickname: null,
					weight: null,
					height: null,
					birthday: null,
					sex: null,
					hobby: null,
					taboo: [],
					pregnancy: '',
					feeding: '',
					intensity: 'm',
					usertype: 'h'
				},
				dictUserType:[
					{text: '家庭成员(长期用餐)',value: 'h'}, {text: '客人(短期用餐)',value: 'g'}],
				dictSex: [
					{text: '男',value: '男'}, {text: '女',value: '女'}],
				dictTaboo:[
					{text:'海鲜',value:'seafood'},{text:'辛辣',value:'spicy'},{text:'内脏',value:'viscus'},
					{text:'肉类',value:'meat'},{text:'蛋类',value:'egg'},{text:'香菜',value:'coriander'},
					{text:'酒类',value:'wine'},{text:'糖类',value:'suger'},{text:'冰品',value:'ice'}],
				dictPregnancy:[
					{text:'无',value:''},
					{text:'孕早期(<=12周)',value:'e'}, 
					{text:'孕中期(<=28周)',value:'m'}, 
					{text:'孕晚期(>28周)',value:'l'},
				],
				dictIntensity:[
					{text:'无',value:''},
					{text:'低强度',value:'l'}, 
					{text:'中等强度',value:'m'}, 
					{text:'高强度',value:'h'},
				],
				dictFeeding: [
					{text:'非哺乳期',value:''}, {text:'哺乳期',value:'feeding'}
				],
				dictHobby: [
					{text:'无',value:''}, 
					{text:'营养均衡',value:'balance'}, {text:'减脂',value:'minus'}, {text:'增肌',value:'plus'}
				],
				dictDisease: [
					{text:'无',value:''}, 
					{text:'高血压',value:'0'}, {text:'高血脂',value:'1'}, {text:'高血糖',value:'2'},
					{text:'低血糖',value:'3'}, {text:'贫血',value:'4'}, {text:'冠心病',value:'5'},
					{text:'甲亢',value:'6'}, {text:'甲减',value:'7'}, {text:'糖尿病',value:'8'},
					{text:'骨质疏松',value:'9'}, {text:'肝硬化',value:'10'}, {text:'脂肪肝',value:'11'},
					{text:'痛风',value:'12'}, {text:'脱发',value:'13'}
				],
				validatorRules: {
					nickname: {
						rules:[
							{
								required: true,
								errorMessage: '{label}不能为空',
							},
							{
								maxLength: 64,
								errorMessage: '{label}长度不能超过{maxLength}个字符',
							}
						],
						label:'昵称',
						validateTrigger:'submit'
					},
					height: {
						rules:[
							{
								required: true,
								errorMessage: '{label}不能为空',
							},
							{
								format: 'number',
								errorMessage: '{label}格式不正确',
							}
						],
						label:'身高',
						validateTrigger:'submit'
					},
					weight: {
						rules:[
							{
								required: true,
								errorMessage: '{label}不能为空',
							},
							{
								format: 'number',
								errorMessage: '{label}格式不正确',
							}
						],
						label:'体重',
						validateTrigger:'submit'
					},
					birthday: {
						rules:[
							{
								pattern: '^\d{4}-\d{2}-\d{2}',
								errorMessage: '{label}格式不正确',
							}
						],
						label:'生日',
						validateTrigger:'submit'
					}
				}
			}
		},
		onLoad() {},
		onReady() {},
		methods: {
			submit(ref) {
				this.$refs[ref].validate().then(res => {
					uni.navigateBack({
						delta: 1
					})
				}).catch(err => {
					uni.showToast({
						title: '校验失败'
					})
				})
			},
		}
	}
</script>

<style>
	.section-content {
		padding: 5px 15px;
		background-color: #fff;
	}

	.uni-forms-item__content{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
	}
	
	.uni-date-editor--x .uni-date__icon-clear {
	    padding: 0px 5px;
	    display: flex;
	    align-items: center;
	}
	
	.btn-bar{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		background-color: #fff;
	}
	
	.btn-save{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 70%;
		height: 40px;
		line-height: 40px;
		border-radius: 20px;
		color: #fff;
		font-size: 14px;
		margin: 10px 0px;
	}
</style>
